import { useSettings } from '@/store/settingStore';
// import { themeVars } from "@/theme/theme.css";
// import { cn } from "@/utils/";
import { Content } from 'antd/es/layout/layout';
import { type CSSProperties, forwardRef } from 'react';
import { Outlet } from 'react-router-dom';
import { ThemeLayout } from '@/types/enum';
import { MULTI_TABS_HEIGHT } from './config';
import MultiTabs from './multi-tabs';
import { MultiTabsProvider } from './multi-tabs/providers/multi-tabs-provider';
import { useTitle } from 'ahooks';

type Props = {
  offsetTop?: boolean;
};
const Main = forwardRef<HTMLDivElement, Props>(({ offsetTop = false }, ref) => {
  const { themeStretch, themeLayout, multiTab } = useSettings();
  const mainStyle: CSSProperties = {
    // paddingTop: multiTab ? MULTI_TABS_HEIGHT : 0,
    // transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    width: '100%',
		borderRadius: '0px',
  };

  return (
    <Content style={mainStyle} className="flex">
      <div className="size-full flex-grow overflow-auto" ref={ref}>
        <div
          className={`m-auto size-full flex-grow p-2 ${
            themeStretch ? '' : 'xl:max-w-screen-xl'
          } ${themeLayout === ThemeLayout.Horizontal ? 'flex-col' : 'flex-row'}`}
        >
          {multiTab ? (
            <MultiTabsProvider>
              <MultiTabs offsetTop={offsetTop} />
            </MultiTabsProvider>
          ) : (
            <Outlet />
          )}
        </div>
      </div>
    </Content>
  );
});

export default Main;
